<script setup lang="ts">
import { ref } from "vue";

interface DialogProps {
  visible: boolean;
  title: string;
  width: number;
  height: number;
}
//接受父组件传递的参数
//withDefaults设置默认值
//defineProps定义props
const props = withDefaults(defineProps<DialogProps>(), {
  title: "标题",
  width: 630,
  height: 280,
  visible: false,
});
//注册事件
const emit = defineEmits(["onClose", "onConfirm"]);
//关闭弹框
const onClose = () => {
  emit("onClose");
};
//确认弹框
const onConfirm = () => {
  emit("onConfirm");
};
</script>

<template>
  <el-dialog
    :model-value="props.visible"
    :title="props.title"
    :width="props.width"
    :before-close="onClose"
    append-to-body
  >
    <div :style="{ height: props.height + 'px' }">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.el-dialog {
  padding: 0;
  background-color: #1677ff;
  
  color: #fff;
}
.el-dialog__body,
.el-dialog__footer {
  background-color: #fff;
  padding: 20px;
}
.el-dialog__header {
  margin-bottom: 0;
  padding: 10px 20px;
  
}
.el-dialog__title {
  color: #fff;
}

.el-dialog__headerbtn {
  width: 44px;
  height: 44px;
  top: 0px;
  right: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-dialog__headerbtn:hover {
  background-color: #5796fc;
  .el-dialog__close {
    font-size: 22px;
  }
}
.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 20px;
}
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: #fff;
}
</style>
